/*
  学习目标：编程式导航
  通过 Route 包装的组件，会在 props 上多一个 history 的属性，这个类似vue中的 router
  ✅ push 有记录跳转
  ✅ replace 无记录跳转(把当前页替换掉)
  goBack() 后退一步
  go(num) 前进/后退 num 步
*/

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
} from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Test></Test>
        <Router>
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          <Switch>
            <Route path="/home" component={Home} exact></Route>
            <Route path="/my" component={My}></Route>
            <Route path="/friend" component={Friend}></Route>

            <Redirect from="/" to="/home"></Redirect>
            {/* 404 一定是 通配，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function Test(props) {
  console.log('Test- props -----> ', props);
  return <div>test</div>;
}
function NotFount() {
  return <div>我是NotFount组件-路径都匹配不上，就显示404吧</div>;
}
function Home(props) {
  console.log('Home-props -----> ', props);
  return (
    <div>
      我是Home组件
      <button onClick={() => props.history.push('/my')}>
        点我push到my组件
      </button>
      <button onClick={() => props.history.replace('/friend')}>
        点我replace到Friend组件
      </button>
      <button onClick={() => props.history.go(-2)}>点我后退2</button>
      <button onClick={() => props.history.go(2)}>点我前进2</button>
    </div>
  );
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
